import {Avatar, List, ListItem} from "@material-ui/core";
import * as React from 'react';
import {DoctorInfo} from "../../components/Components";
import Info from "../../components/Info";
import {doctorExpandItem, doctorListFetch} from "../../store/actions";
import {AppPageProps} from "../../types/AppPageProps";
import CardHeader from "../mymedicalcard/CardHeader";
import DoctorSourceList from "./DoctorSourceList";


interface Data {
    id: string,
    detail: string
}

interface DoctorProps extends AppPageProps {
    expands: string,
    list: Data[],
}

class DoctorList extends React.Component<DoctorProps> {

    public handleClick = (id: string) => {
        this.props.dispatch(doctorExpandItem(id));
    };

    public moreClick = (id: string) => {
        this.props.history.push({
            pathname: "/doctor/source/list",
            state: {id}
        })
    };

    public componentWillMount() {
        // const {id} = this.props.history.location.state;
        const id = "1";
        this.props.dispatch(doctorListFetch(id));
    }


    public render() {
        const {expands, list = []} = this.props;
        return (
            <List
                component="div"
                subheader={
                    <CardHeader
                        title={"医生列表"}
                        diplayButton={true}
                        url={"#/scheduleCalendar"}
                        buttonName={"排班日历"}/>
                }
            >
                {
                    list.map((each: any, index) => {
                        const {id, detail, schedule = []} = each;
                        return <ListItem key={id} button={true}>
                            <Info expands={id === expands}
                                  data={each}
                                  link={
                                      <div className={"flex-center flex-column"}>
                                          <Avatar
                                              alt="Adelle Charles"
                                              src={"../icons/1.png"}
                                              style={{width: 20, height: 20}}
                                          />
                                          <div>有号</div>
                                      </div>
                                  }
                                  detail={
                                      <DoctorSourceList
                                          id={id}
                                          schedule={schedule}
                                          detail={
                                              <div>
                                                  医生简介:<br/>
                                                  <span>&nbsp;&nbsp;{detail}</span>
                                              </div>
                                          }
                                          doctor={each}
                                          moreClick={this.moreClick}/>
                                  }
                                  showDivider={index !== list.length - 1}
                                  style={{alignItems: "center"}}
                            >
                                <DoctorInfo data={each} itemClick={this.handleClick.bind(this, id)}/>
                            </Info>
                        </ListItem>;
                    })
                }
            </List>
        );
    }
}

export default DoctorList;